<template>
    <template v-if="user">
        <van-cell title="昵称" is-link :value="user.username" @click="toEdit('username', '昵称', user.username)" />
        <van-cell title="账号" :value="user.userAccount" />
        <van-cell title="头像" :value="user.avatarUrl">
            <img style="height: 36px" :src="user.avatarUrl" />
        </van-cell>
        <van-cell title="性别" is-link :value="genderDict[user.gender]" @click="toEdit('gender', '性别', user.gender)" />
        <van-cell title="电话" is-link :value="user.phone" @click="toEdit('phone', '电话', user.phone)" />
        <van-cell title="邮箱" is-link :value="user.email" @click="toEdit('email', '邮箱', user.email)" />
        <van-cell title="星球编号" :value="user.planetCode" />
        <van-cell title="注册时间" :value="moment(user.createTime).format('YYYY-MM-DD')" />
    </template>
</template>

<script setup lang="ts">
import moment from 'moment'
import router from '../router'
import { onMounted, ref } from 'vue'
import { getCurrentUser } from '../services/user.ts'
import { genderDict } from '../constants/gender.ts'

const user = ref();

onMounted(async () => {
    user.value = await getCurrentUser();
})

const toEdit = (editKey: string, editName: string, currentValue: string) => {
    router.push({
        path: '/user/edit',
        query: {
            editKey,
            editName,
            currentValue
        }
    })
}
</script>

<style scoped></style>